---
title: <ApiKeysCard />
---

The `<ApiKeysCard />` component provides a complete interface for managing API keys, including creating, viewing, and deleting API keys for programmatic access to your application.

## Usage

```tsx
import { ApiKeysCard } from '@daveyplate/better-auth-ui'

export function ApiKeysSettingsPage() {
  return (
    <ApiKeysCard />
  )
}
```

## Features

- **Create API Keys**: Generate new API keys with custom names and expiration
- **View API Keys**: List all active API keys with masked values
- **Delete API Keys**: Remove API keys that are no longer needed
- **Expiration Management**: Set expiration dates for API keys
- **Copy to Clipboard**: Easy copying of newly created keys

## Reference

<AutoTypeTable path="../src/components/settings/shared/settings-card.tsx" name="SettingsCardProps" />

## Examples

### Basic Usage

```tsx
<ApiKeysCard />
```

### With Custom Class Names

```tsx
<ApiKeysCard 
  classNames={{
    base: "shadow-md",
    button: "rounded-full",
    cell: "hover:bg-accent"
  }}
/>
```

### With Custom Localization

```tsx
<ApiKeysCard 
  localization={{
    API_KEYS: "Developer Keys",
    CREATE_API_KEY: "Generate New Key",
    DELETE: "Revoke"
  }}
/>
```

## API Key Creation

When creating a new API key, users can:

1. **Set a Name**: Identify the key's purpose
2. **Set Expiration**: Choose from predefined durations or no expiration
   - 1 day
   - 7 days
   - 30 days
   - 60 days
   - 90 days
   - 180 days
   - 1 year
   - No expiration

## Security Features

- **One-Time Display**: API keys are shown only once after creation
- **Masked Display**: Only the first few characters are shown in the list
- **Secure Storage**: Keys are hashed and stored securely
- **Immediate Revocation**: Keys can be deleted instantly

## Requirements

The API Key plugin must be enabled in your auth configuration:

```tsx title="providers.tsx"
<AuthUIProvider
  authClient={authClient}
  apiKey={{
    prefix: "app_", // Optional: Custom prefix for keys
    metadata: {      // Optional: Additional metadata
      environment: "production"
    }
  }}
>
  {children}
</AuthUIProvider>
```

## Display Components

### API Key List
Shows all active API keys with:
- Key name
- Masked key value (first 4 characters + asterisks)
- Expiration date or "Never expires"
- Delete button

### Create Dialog
Modal for creating new keys with:
- Name input field
- Expiration dropdown
- Create button with loading state

### Display Dialog
Shows newly created key with:
- Full API key value
- Copy to clipboard button
- Warning about one-time display
- Done button to close

## Best Practices

1. **Naming Convention**: Use descriptive names for keys
2. **Expiration Policy**: Always set expiration for production keys
3. **Key Rotation**: Regularly rotate API keys
4. **Access Control**: Limit who can create/delete keys
5. **Monitoring**: Track API key usage 